<!-- 侧边栏-标签 -->
<template>
  <div class="v-attribute-tag g-relative">
    <div
      class="g-toolbar-between"
      :class="[$global.isIpcWindow ? '_BackGroundWhite is_ipc' : '__BackGroundGrey']"
    >
      <div class="g-toolbar-left">
        <span
          class="g-img-box"
          :class="{ '_sort-active': data.expandActive }"
          @click="tagsPane.handleSpreadAll()"
        >
          <img src="statics/icons/app/iconspread.svg" />
        </span>
        <span
          class="g-img-box"
          :class="{ '_sort-active': data.shrinkActive }"
          @click="tagsPane.handleShrinkAll()"
        >
          <img src="statics/icons/app/iconshrink.svg" />
        </span>
      </div>
    </div>

    <div class="_attribute-content g-fd-c">
      <PropertyTagTable
        :key="data.modelData?.id"
        :tagsPaneModel="tagsPane"
        :instanceName="'值'"
        class="g-flex-1"
        :class="[$global.isIpcWindow ? '' : 'g-pd-t-10']"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";

import PropertyTagTable from "./PropertyTagTable.vue";

// const attributeTabsModel = app.activeProject!.attributeTabsModel;
const attributeTabsModel = computed(() => app.activeProject!.attributeTabsModel);

const data = computed(() => {
  return attributeTabsModel.value.data;
});
const tagsPane = computed(() => {
  return attributeTabsModel.value.tagsPaneModel;
});
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-attribute-tag {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  ._attribute-content {
    flex: 1;
    height: 100px;
    background-color: white;
    .el-input__inner {
      box-shadow: none;
      height: 24px;
    }
    .el-input.is-disabled .el-input__inner {
      background-color: none;
      cursor: default;
    }
  }
  .search-area {
    .el-input__wrapper {
      border: 1px solid #d0d0d0;
      box-shadow: none;
      padding: 0 12px;
      .el-input__icon {
        margin-right: 5px;
      }
    }
  }
  ._attribute_no-data {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
